<template>
  <div class="box content">
    <div class="subTopBox">商品管理 / 政策列表 / 创建政策</div>
    <div class="title" style="margin-top: 60px">添加政策基本信息</div>
    <div>
      <el-form :model="form" :rules="rules">
        <el-form-item
          label="政策标识"
          class="name1"
          prop="policyCode"
          label-width="100px"
          style="float: left"
        >
          <el-input
            :maxlength="porricyLabelNameLength"
            style="width: 200px"
            placeholder="请输入政策标识"
            v-model="form.policyCode"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="品牌名称"
          prop="channelUid"
          label-width="100px"
          style="float: left"
        >
          <el-select
            v-model="form.channelUid"
            placeholder="请选择"
            class="pinpai"
          >
            <el-option
              v-for="item in options22"
              :key="item.uid"
              :label="item.channelName"
              :value="item.uid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div style="clear: both"></div>

        <el-form-item
          label="政策日期"
          label-width="100px"
          style="float: left; width: 400px"
          prop="endDate"
        >
          <div class="block" style="display: flex; width: 350px !important">
            <el-date-picker
              v-model="form.beginDate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 160px !important"
              placeholder="开始日期"
            >
            </el-date-picker>
            <span class="zhi">至</span>
            <el-date-picker
              v-model="form.endDate"
              style="width: 160px !important"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <div style="clear: both"></div>
        <el-form-item
          label="初始状态"
          prop="status"
          label-width="100px"
          style="float: left"
        >
          <el-radio v-model="form.status" label="0">启用</el-radio>
          <el-radio v-model="form.status" label="1">停用</el-radio>
        </el-form-item>
        <div style="clear: both"></div>
        <el-form-item label="备注" label-width="100px" style="float: left">
          <el-input
            :maxlength="remarkes"
            type="textarea"
            v-model="form.remarks"
            style="width: 755px"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="clear: both"></div>
    <div class="title">添加终端</div>
    <div
      class="headTop"
      style="
        display: flex;
        width: 97%;
        margin: 0 auto;
        padding: 20px;
        background: #f9fafc;
        border-bottom: 1px solid #ebeef5;
      "
    >
      <div class="addListType"></div>
      <div class="typeName">产品类型</div>
      <div class="zhongduan">终端类型</div>
      <div class="">终端单价</div>
    </div>
    <div class="biggerBox">
      <div
        class="listers"
        v-for="(item, index) in form.productTypeResponseList"
        :key="index"
      >
        <div class="addListType">
          <el-button type="text" v-if="index == 0" @click="addProductType"
            >添加产品类型</el-button
          >
          <el-button
            type="text"
            v-if="index != 0"
            @click="delProductType(index)"
            >取消产品类型</el-button
          >
        </div>
        <!-- 选择框产品类型 -->
        <div style="display: flex">
          <div class="typeName">
            <el-select v-model="item.productType" placeholder="请选择">
              <el-option
                v-for="item in typeProduct"
                :key="item.productType"
                :label="item.typeName"
                :value="item.productType"
              >
              </el-option>
            </el-select>
          </div>

          <!-- 终端类型 -->
          <div>
            <div
              style="display: flex"
              v-for="(item1, index1) in item.productInfoResponses"
              :key="index1"
            >
              <div class="zhongduan">
                <el-select
                  style="margin-bottom: 20px"
                  v-model="item1.value"
                  placeholder="请选择"
                  :disabled="item.productType == ''"
                >
                  <el-option
                    v-for="item in options11"
                    :key="item.productNo"
                    :label="item.label"
                    :value="item.productNo"
                  >
                  </el-option>
                </el-select>
                <span @click="addCenter(index)" v-if="index1 == 0">
                  <img
                    style="cursor: pointer"
                    src="../../assets/images/addPoliy.png"
                    width="20px"
                    height="20px"
                    alt=""
                  />
                </span>
                <span @click="delCenter(index, index1)" v-if="index1 != 0">
                  <img
                    src="../../assets/images/delPoliy.png"
                    width="15px"
                    height="15px"
                    style="cursor: pointer; margin-left: 5px"
                    alt=""
                  />
                </span>
              </div>
              <div class="unitAmtList" style="margin-bottom: 20px">
                <!-- 这边是价格 -->
                <div
                  v-for="(item2, index2) in item1.unitAmtList"
                  :key="index2"
                  style="
                    margin-bottom: 20px;
                    margin-right: 20px;
                    width: 220px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <el-input
                    v-model="item2.price"
                    placeholder="请输入价格"
                    @input="value=>{item2.price=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')}"
                  ></el-input>
                  <span v-if="index2 == 0" @click="addMoney(index, index1)">
                    <img
                      style="margin-left: 5px; cursor: pointer"
                      src="../../assets/images/addPoliy.png"
                      width="20px"
                      height="20px"
                      alt=""
                    />
                  </span>
                  <span
                    v-if="index2 != 0"
                    @click="delMoney(index, index1, index2)"
                  >
                    <img
                      src="../../assets/images/delPoliy.png"
                      width="15px"
                      height="15px"
                      style="cursor: pointer; margin-left: 5px"
                      alt=""
                    />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <el-button type="primary" @click="submitPolicy">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import revenueStatisticsVue from "../dataManagement/revenueStatistics.vue";
import { CompareDate } from "../../assets/js/commion";
import https from '../../plugins/https';
import {remarkes , porricyLabelNameLength} from "../../plugins/rules.js"
export default {
  name: "aaa",
  data() {
    return {
      porricyLabelNameLength:porricyLabelNameLength,
      remarkes:remarkes,
      options11: "",
      typeProduct: null,
      options22: "",
      radio: "1",
      policyId: "", //政策标识
      remarks: "", //备注
      startDate: "", //开始时间
      endDate: "", //结束时间
      submitBool: false,
      newArr: [],
      form: {
        id: 0,
        policyCode: "", //政策标识
        beginDate: "", //开始时间
        endDate: "", //结束时间
        status: "0", //状态
        remarks: "", //备注
        channelUid: "", //品牌名称
        productTypeResponseList: [
          {
            productType: "", //产品类型
            productInfoResponses: [
              {
                value: "",
                unitAmtList: [{ price: "" }],
              },
            ], //终端类型（value代表终端类型，money代表值）
          },
        ],
      }, //提交的
      rules: {
        policyCode: [{ required: true }],
        channelUid: [{ required: true }],
        endDate: [{ required: true }],
        status: [{ required: true }],
      },
    };
  },
  created() {
    this.getTypes();
    this.getProductType();
    this.getBrand();
    if (this.$route.query.id && this.$route.query.policyCode) {
      this.getDetail();
      this.form.id = this.$route.query.id;
    } else {
      this.form.id = 0;
    }
  },
  methods: {
    //   添加产品类型
    addProductType() {
      var obj = {
        productType: "", //产品类型
        productInfoResponses: [
          {
            value: "",
            unitAmtList: [{ price: "" }],
          },
        ], //终端类型（value代表终端类型，money代表值）
      };
      this.form.productTypeResponseList.push(obj);
    },
    // 删除产品类型
    delProductType(num1) {
      this.form.productTypeResponseList.splice(num1, 1);
    },
    //添加终端单价
    addMoney(num1, num2) {
      console.log(num1, num2);
      var obj = { price: "" };
      this.form.productTypeResponseList[num1].productInfoResponses[
        num2
      ].unitAmtList.push(obj);
    },
    // 添加终端类型
    addCenter(num1) {
      console.log(num1);
      var obj = { value: "", unitAmtList: [{ price: "" }] };
      this.form.productTypeResponseList[num1].productInfoResponses.push(obj);
    },
    // 删除钱
    delMoney(num1, num2, num3) {
      var newArr = this.form.productTypeResponseList[num1].productInfoResponses[
        num2
      ].unitAmtList;
      newArr.splice(num3, 1);
    },
    // 删除终端类型
    delCenter(num1, num2) {
      console.log(num1, num2);
      this.form.productTypeResponseList[num1].productInfoResponses.splice(
        num2,
        1
      );
    },
    // 获取终端类型
    getTypes() {
      https.terminalType({})
        .then((res) => {
          this.options11 = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击确认
    submitPolicy() {
      console.log(this.form.productTypeResponseList)
 
      this.submitBool = false;
      outer: for (
        let i = 0;
        i < this.form.productTypeResponseList.length;
        i++
      ) {
        //  首先判断所有终端不能为空
        if (this.form.productTypeResponseList[i].productType != "") {
          //  alert("产品类型没有为空的")
          for (
            let j = 0;
            j <
            this.form.productTypeResponseList[i].productInfoResponses.length;
            j++
          ) {
            if (
              this.form.productTypeResponseList[i].productInfoResponses[j]
                .value != ""
            ) {
              // alert("终端类型没有为空的")
              for (
                let k = 0;
                k <
                this.form.productTypeResponseList[i].productInfoResponses[j]
                  .unitAmtList.length;
                k++
              ) {
                if (
                  this.form.productTypeResponseList[i].productInfoResponses[j]
                    .unitAmtList[k].price != ""
                ) {
                  // alert("价钱没有为空的")
                  this.submitBool = true;
                } else {
                  alert("价钱有空的")
                  this.submitBool = false;
                  break outer;
                }
              }
            } else {
              // alert("终端类型有空的")
              this.submitBool = false;
              break outer;
            }
          }
        } else {
          //  alert("产品类型有空的")
          this.submitBool = false;
          break;
        }
      }

      if (
        this.form.policyCode != "" &&
        this.form.channelUid != "" &&
        this.form.beginDate != "" &&
        this.form.endDate != "" &&
        this.submitBool == true
      ) {
        if (CompareDate(this.form.beginDate, this.form.endDate)) {
          https.addPloicy(this.form)
            .then((res) => {
              console.log("创建成功");
              console.log(res);
              if (res.data.code == "0000") {
                this.submitBool = false;
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 1, //1秒后自动关闭
                });
                setTimeout(() => {
                  this.$router.push({
                    name: "policyList",
                  });
                }, 2000);
              } else {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 1, //1秒后自动关闭
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }else{
          layer.open({
          content: "开始日期不能小于结束日期",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
        }
      } else {
        layer.open({
          content: "必填参数不能为空",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
      }

      return;
    },
    // 取消 返回上个页面
    cancel() {
      this.$router.push({
        name: "policyList",
      });
    },
    // 获取产品类型
    getProductType() {
      https.getProductType()
        .then((res) => {
          console.log(res);
          this.typeProduct = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取品牌
    getBrand() {
      https.queryChannelNameList({})
        .then((res) => {
          this.options22 = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 回显
    getDetail() {
      var id = this.$route.query.id;
      var policyCode = this.$route.query.policyCode;
      https.echoPolicyData({id: id, policyCode: policyCode,})
        .then((res) => {
          var datas = res.data.data;
          this.form = res.data.data;
        })
        .catch((err) => {
        });
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 18px;
  color: #393d49;
  margin: 20px 0;
  font-family: system-ui;
  text-indent: 30px;
}
.listers {
  display: flex;
  padding-top: 20px;
  border-bottom: 1px solid #ebeef5;
}
.box {
  padding-left: 20px;
  position: relative;
}
.subTopBox {
  width: calc(100% + 20px);
  height: 40px;
  font-size: 16px;
  margin-left: -20px;
  background: #fff;
  display: flex;
  align-items: center;
  padding-left: 25px;
  box-sizing: border-box;
  position: fixed;
  top: 50px;
  z-index: 666;
  border-bottom: 1px solid #d8dce6;
}
.addListType {
  width: 130px;
}
.typeName {
  width: 260px;
}
.zhongduan {
  width: 260px;
}
.unitAmtList {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
}
.biggerBox {
  background: #f9fafc;
  padding: 20px;
  width: 97%;
  margin: 0 auto;
  padding-bottom: 0;
  box-sizing: border-box;
}
.foot {
  text-align: center;
  margin-top: 60px;
}
.zhi {
  display: block;
  width: 30px;
  text-align: center;
}
/deep/ .name1 .el-input {
  width: 350px !important;
}
/deep/ .name1 .el-input__inner {
  width: 350px !important;
}
/deep/ .pinpai .el-input {
  width: 300px !important;
}
/deep/ .pinpai .el-input__inner {
  width: 300px !important;
}
/deep/ .el-form-item__error {
  display: none !important;
}
</style>